<template>
  <mescroll-uni
    @init="mescrollInit"
    :up="upOption"
    :down="downOption"
    @down="downCallback"
    @up="upCallback"
  >
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-wrapper">
        <input
          class="search-input"
          v-model="searchForm.xiquLiuyanText"
          type="text"
          placeholder="请输入留言内容"
        />
        <view class="action-buttons">
          <view class="search-btn" @tap="search">
            <text class="btn-text">搜索</text>
          </view>
          <view
            v-if="isAuth('xiquLiuyan', '新增')"
            class="add-btn"
            @click="onAddTap"
          >
            <text class="btn-text">新增</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 留言列表 -->
    <view class="comment-list">
      <view
        class="comment-item"
        v-for="(item, index) in list"
        :key="index"
        @click="onItemTap(item)"
      >
        <view class="comment-header">
          <image class="user-avatar" src="/static/images/default-avatar.png" />
          <view class="user-info">
            <text class="username">{{ item.xiquName }}</text>
            <text class="post-time">{{ item.insertTime }}</text>
          </view>
          <view
            v-if="isAuth('xiquLiuyan', '删除')"
            class="delete-btn"
            @click.stop="onDeleteTap(item.id)"
          >
            <text class="iconfont icon-close"></text>
          </view>
        </view>

        <view class="comment-content">
          <text class="comment-text">{{ item.xiquLiuyanText }}</text>
          <view v-if="item.replyText" class="reply-section">
            <text class="reply-label">官方回复：</text>
            <text class="reply-content">{{ item.replyText }}</text>
          </view>
        </view>
      </view>
    </view>
  </mescroll-uni>
</template>

<script>
export default {
  data() {
    return {
      user: {}, //当前登录表的所有参数
      sessionTable: uni.getStorageSync("nowTable"), //登录账户所在表名
      role: uni.getStorageSync("role"), //权限
      userId: uni.getStorageSync("userid"), //当前登录人的id
      btnColor: [
        "#67c23a",
        "#909399",
        "#e6a23c",
        "#f56c6c",
        "#356c6c",
        "#3498db",
        "#f093a9",
        "#a7c23a",
        "#104eff",
        "#90f794",
        "#a21233",
        "#8e44ad",
      ],
      queryList: [
        {
          queryName: "中医药科普留言名称",
        },
      ],
      sactiveItem: {
        padding: "0",
        boxShadow: "0 0 0px rgba(0,0,0,.3)",
        margin: "0 10rpx",
        borderColor: "rgba(0,0,0,1)",
        backgroundColor: "var(--publicMainColor)",
        color: "#fff",
        borderRadius: "0 40rpx 40rpx 0",
        borderWidth: "0",
        width: "auto",
        lineHeight: "160rpx",
        fontSize: "28rpx",
        borderStyle: "solid",
      },
      sitem: {
        padding: "0",
        boxShadow: "0 0 0px rgba(0,0,0,.3)",
        margin: "0 10rpx",
        borderColor: "rgba(0,0,0,1)",
        backgroundColor: "var(--publicSubColor)",
        color: "#fff",
        borderRadius: "0 40rpx 40rpx 0",
        borderWidth: "0",
        width: "auto",
        lineHeight: "160rpx",
        fontSize: "28rpx",
        borderStyle: "solid",
      },

      list: [],
      mescroll: null, //mescroll实例对象
      downOption: {
        auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
      },
      upOption: {
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        textNoMore: "~ 没有更多了 ~",
      },
      hasNext: true,
      searchForm: {},
      /*1111*/

      CustomBar: "0",
    };
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },
  },
  async onShow() {
    this.btnColor = this.btnColor.sort(() => {
      return 0.5 - Math.random();
    });

    let _this = this;
    let table = uni.getStorageSync("nowTable");
    // 获取用户信息
    let resA = await _this.$api.session(table);
    _this.user = resA.data;
    _this.btnColor = _this.btnColor.sort(() => {
      return 0.5 - Math.random();
    });

    this.hasNext = true;
    // 重新加载数据
    if (this.mescroll) this.mescroll.resetUpScroll();
  },
  onLoad() {
    this.hasNext = true;
    // 重新加载数据
    if (this.mescroll) this.mescroll.resetUpScroll();
  },
  methods: {
    //类型条件查询
    async showDrawer() {
      this.$refs.showRight.open();
    },
    async closeDrawer() {
      this.$refs.showRight.close();
    },
    //下载
    download(url) {
      let _this = this;
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            _this.$utils.msg("下载成功");
            window.open(url);
          }
        },
      });
    },
    //查询条件切换
    queryChange(e) {
      this.searchForm.xiqu_liuyanName = "";
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*下拉刷新的回调 */
    downCallback(mescroll) {
      this.hasNext = true;
      // 重置分页参数页数为1
      mescroll.resetUpScroll();
    },
    /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
    async upCallback(mescroll) {
      let params = {
        page: mescroll.num,
        limit: mescroll.size,
      };

      let _this = this;
      let res = await this.$api.page(`xiquLiuyan`, params);
      res.data.list.forEach(function (item, index) {});

      if (mescroll.num == 1) this.list = [];
      this.list = this.list.concat(res.data.list);
      if (res.data.list.length == 0) this.hasNext = false;
      mescroll.endSuccess(mescroll.size, this.hasNext);
    },
    //添加地址
    onSelectTap(item) {
      uni.setStorageSync("address", item);
      uni.navigateBack({
        delta: 1,
      });
    },
    // 详情

    onDetailTap(item) {
      this.$utils.jump(`./detail?id=${item.id}`);
    },
    // 修改
    onUpdateTap(id) {
      this.$utils.jump(`./add-or-update?id=${id}`);
    },
    // 添加
    onAddTap() {
      this.$utils.jump(`./add-or-update`);
    },
    onDeleteTap(id) {
      var _this = this;
      uni.showModal({
        title: "提示",
        content: "是否确认删除",
        success: async function (res) {
          if (res.confirm) {
            await _this.$api.del("xiquLiuyan", JSON.stringify([id]));
            _this.hasNext = true;
            // 重置分页参数页数为1
            _this.mescroll.resetUpScroll();
          }
        },
      });
    },
    onShenhe(data, shenheTypes) {
      var _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要这个审核状态么?",
        success: async function (res) {
          if (res.confirm) {
            var currentTime = new Date();
            var year = currentTime.getFullYear();
            var month =
              currentTime.getMonth() + 1 < 10
                ? "0" + (currentTime.getMonth() + 1)
                : currentTime.getMonth() + 1;
            var day =
              currentTime.getDate() < 10
                ? "0" + currentTime.getDate()
                : currentTime.getDate();
            var hour = currentTime.getHours();
            var minute = currentTime.getMinutes();
            var second = currentTime.getSeconds();
            var shijian =
              year +
              "-" +
              month +
              "-" +
              day +
              " " +
              hour +
              ":" +
              minute +
              ":" +
              second;

            data.xiquLiuyanYesnoTypes = shenheTypes;
            data.xiquLiuyanShenheTime = shijian;
            await _this.$api.update(`xiquLiuyan`, data);
            _this.hasNext = true;
            // 重置分页参数页数为1
            _this.mescroll.resetUpScroll();
          }
        },
      });
    },
    // 搜索
    async search() {
      this.mescroll.num = 1;
      let searchForm = {
        page: this.mescroll.num,
        limit: this.mescroll.size,
      };
      if (this.searchForm.xiquLiuyanText) {
        searchForm["xiquLiuyanText"] = this.searchForm.xiquLiuyanText;
      }

      let res = await this.$api.page(`xiquLiuyan`, searchForm);
      let _this = this;
      res.data.list.forEach(function (item, index) {});
      // 如果是第一页数据置空
      if (this.mescroll.num == 1) this.list = [];
      this.list = this.list.concat(res.data.list);
      if (res.data.list.length == 0) this.hasNext = false;
      this.mescroll.endSuccess(this.mescroll.size, this.hasNext);
    },
  },
};
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$error-color: #f56c6c;
$text-color: #303133;
$text-light: #909399;
$border-color: #ebeef5;
$bg-color: #f5f7fa;

.search-container {
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);

  .search-wrapper {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .search-input {
      flex: 1;
      height: 80rpx;
      padding: 0 30rpx;
      background: $bg-color;
      border-radius: 40rpx;
      font-size: 28rpx;
      color: $text-color;
    }

    .action-buttons {
      display: flex;
      gap: 15rpx;

      .search-btn,
      .add-btn {
        padding: 0 30rpx;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        transition: all 0.3s;
      }

      .search-btn {
        background: linear-gradient(135deg, $primary-color, #66b1ff);
      }

      .add-btn {
        background: linear-gradient(135deg, $success-color, #85ce61);
      }

      .btn-text {
        color: #fff;
        font-size: 28rpx;
      }
    }
  }
}

.comment-list {
  padding: 20rpx 30rpx;

  .comment-item {
    margin-bottom: 30rpx;
    padding: 30rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: all 0.2s;

    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }

    .comment-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .user-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .username {
          font-size: 30rpx;
          color: $text-color;
          font-weight: 500;
        }

        .post-time {
          font-size: 24rpx;
          color: $text-light;
        }
      }

      .delete-btn {
        padding: 10rpx;
        .iconfont {
          font-size: 36rpx;
          color: $error-color;
        }
      }
    }

    .comment-content {
      .comment-text {
        display: block;
        font-size: 28rpx;
        color: $text-color;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }

      .reply-section {
        padding: 20rpx;
        background: lighten($primary-color, 40%);
        border-radius: 8rpx;
        border-left: 6rpx solid $primary-color;

        .reply-label {
          font-size: 24rpx;
          color: $primary-color;
          margin-right: 10rpx;
        }

        .reply-content {
          font-size: 26rpx;
          color: $text-color;
        }
      }
    }
  }
}
</style>
